<h1>选项</h1>
<form clrForm
      class="clr-form clr-form-compact">

  <div class="form-group">
    <label for="dark">暗色主题:</label>
    <div class="toggle-switch">
      <input name="dark"
             type="checkbox"
             id="dark"
             [(ngModel)]="ms.options.dark"
             (change)="ms.setTheme()">
             <label for="dark"></label> 
    </div>
  </div>

  <div class="form-group">
    <label for="selects_1">顶部颜色</label>
    <div class="select">
      <select name="header"
              id="selects_1"
              [(ngModel)]="ms.options.header"
              (change)="ms.options.headerEmitter.emit(ms.options.header)">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
        <option>6</option>
        <option>7</option>
      </select>
    </div>
  </div>

  <div class="form-group">
    <label for="format">替代数字格式:</label>
    <div class="toggle-switch">
      <input type="checkbox"
             id="format"
             name="format"
             [(ngModel)]="ms.options.usaFormat"
             (change)="ms.options.generateFormatter()">
             <label for="format"></label>
    </div>
  </div>

  <div class="form-group">
    <label for="numFormat">数字格式:</label>
    <div class="select">
      <select id="numFormat"
              name="numFormat"
              [(ngModel)]="ms.options.numFormat"
              (change)="ms.options.generateFormatter()">
        <option value="standard">默认</option>
        <option value="scientific">科学计数法</option>
        <option value="engineering">工程计数法</option>
        <option value="longScale">长比例尺</option>
      </select>
    </div>
  </div>

  <div class="form-group">
    <label for="matPos">材料位置:</label>
    <div class="select">
      <select id="matPos"
              name="matPos"
              [(ngModel)]="os.materialPosition"
              (change)="onChangeMaterialPos()">
        <option value="1">全部</option>
        <option value="2">顶部</option>
        <option value="3">侧边</option>
      </select>
    </div>
  </div>

  <div class="form-group">
    <label for="si">显示我的新单位:</label>
    <div class="toggle-switch">
      <input name="si"
             type="checkbox"
             id="si"
             [(ngModel)]="ms.options.showI">
      <label for="si"></label>
    </div>
  </div>

  <div class="form-group">
    <label for="nr">禁用单位消耗完的通知:</label>
    <div class="toggle-switch">
      <input name="nr"
             type="checkbox"
             id="nr"
             [(ngModel)]="os.noResourceEndPopUp">
      <label for="nr"></label>
    </div>
  </div>

  <div class="form-group">
    <label for="wn">禁用时间扭曲通知:</label>
    <div class="toggle-switch">
      <input name="wn"
             type="checkbox"
             id="wn"
             [(ngModel)]="os.noWarpNotification">
      <label for="wn"></label>
    </div>
  </div>

  <div class="form-group">
    <label for="time">严格单位时间:</label>
    <div class="toggle-switch">
      <input name="time"
             type="checkbox"
             id="time"
             [(ngModel)]="os.timeFormatDetail">
      <label for="time"></label>
    </div>
  </div>

</form>
